.DoubleBar{width: 500px; color:#fff;}
.baritem{ display: flex; margin: 12px 0;align-items:center;}
.baritem .baritemtitle{ 
    width: 100px;
    height: 30px;
    text-align:right;
    font-size:16px;
    font-family:HYQiHeiY1-55W;
    font-weight:normal;
    margin-right: 10px;
}
.baritem .baritemr{ flex: 1; position: relative;}
.baritem .baritemr p{ position: absolute; left: 0; bottom: 0; right: 0;}
.baritem .baritemr p{ display: inline-block; height: 10px; border-top-left-radius:5px ;border-bottom-left-radius:5px ;}
.baritem .baritemr p:nth-child(1){ background-color: #10425D; border-top-right-radius: 5px; border-bottom-right-radius:5px ;}
.baritem .baritemr p:nth-child(2){ background-color: rgb(0,187,210);}
.baritem .baritemr p:nth-child(3){ background-color: rgb(44 255 153 / 50%) ;}
.baritem .baritemr .barlabel{ transform: translate(-100%,0); display: inline-block; position: absolute;bottom: 0;
    font-size:21px;
    font-family:AgencyFB-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height: 15px;
    margin-left: 1px;
}

.DoubleBar-valueAnimation{
    animation: valueAnimation 4s linear
}
@keyframes valueAnimation {
    from{
        left: 0;
    }
}

.DoubleBar-Animation{
    animation: DoubleBar-Animation 4s linear ;
}
@keyframes DoubleBar-Animation {
    from{
        width: 0;
    }
}
